<html>
    <head>
        <title>生产环境部署</title>
    </head>
    <body>
        <script>
            // 生产环境部署
                    // 以下大多数内容在你使用 Vue CLI时都是默认开启的。 该章节仅跟你自定义的构建设置有关。

                    // 一、开启生产环境模式
                            /*
                                开发环境下，Vue会提供很多晶澳来帮助你对付常见的错误与陷阱。
                                而在生产模式下，这些警告语句却没有用，反而会增加应用的体积。
                                此外，有一些应该检查还有一些小的运行时开销，这在生产环境模式下是可以避免的。
                            */

                            // 1、 不使用构建工具
                                        /*
                                            如果用Vue完整独立版本，级直接用<script>元素引入 Vue 而不提前进行构建，请记得在生产环境下使用压缩后的版本 (vue.min.js).
                                            两种版本都可以子啊安装指导中找到。
                                        */

                            // 2、使用构建工具
                                        /*
                                            当使用 webpack 或 Browerify 类似的构建工具时，Vue源码会根据 process.env.NODE_ENV 决定是否启用生产环境模式，
                                            默认情况为开发环境模式。在webpack 与 Browerify 中都有方法来覆盖此变量，以启用Vue的生产环境模式，
                                            同时在构建过程中警告语句也会被压缩工具去除。所有这些在 vue-cli 模板中都预先配置好了，但了解一下怎样配置会更好。


                                            ①、webpack 
                                                    在 webpack 4+中，你可以使用mode选项：
                                                    module.exports={
                                                        mode:'production'
                                                    }

                                                但是在 webpack 3 及其更低版本中，你需要使用DefinePlugin ：
                                                    var webpack = require('webpack')

                                                    module.exports={
                                                       // ...
                                                       pulgins:[
                                                            // ...
                                                            new webpack.DefinePlugin({
                                                                'process.env.NODE_ENV':JSON.stringify('production')
                                                            });
                                                       ]
                                                    }

                                            ②、Browerify
                                                   在运行打包命令时将 NODE_ENV 设置为 "production"。这等于告诉 vueify 避免引入热重载和开发相关的代码。
                                                   对打包后的文件进行一次全局的 envify 转换。这使得压缩工具能清除掉 Vue 源码中所有用环境变量条件包裹起来的警告语句。
                                                   
                                                   例如：
                                                        NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.js

                                                   或者在 Gulp 中使用 envify:
                                                        // 使用 envify 自定义模块指定环境变量
                                                            var envify = require('envify/custom')

                                                            browserify(browserifyOptions)
                                                            .transform(vueify)
                                                            .transform(
                                                                // 必填项，以处理 node_modules 里的文件
                                                                { global: true },
                                                                envify({ NODE_ENV: 'production' })
                                                            )
                                                            .bundle()

                                                    或者配合 Grunt 和 grunt-browserify使用 envify:
                                                         // 使用 envify 自定义模块指定环境变量
                                                            var envify = require('envify/custom')

                                                            browserify: {
                                                                dist: {
                                                                    options: {
                                                                        // 该函数用来调整 grunt-browserify 的默认指令
                                                                        configure: b => b
                                                                        .transform('vueify')
                                                                        .transform(
                                                                            // 必填项，以处理 node_modules 里的文件
                                                                        { global: true },
                                                                        envify({ NODE_ENV: 'production' })
                                                                        )
                                                                        .bundle()
                                                                    }
                                                                }
                                                            }
                                                                                                    
                                        */

                    // 二、模板预编译
                                /*
                                    概念：
                                        模板预编译指的是"在构建时"把模板编译成"渲染函数"，在执行时就无需编译，可直接执行渲染函数。


                                        当使用"DOM内模板"或 "JavaScript内的字符串模板"时，模板会在运行时被编译为"渲染函数"。
                                    通常情况下这个过程已经足够快了，但对性能敏感的应用还是最好避免这哈怂用法。

                                        预编译模板最简单的方式就是使用"单文件组件"----相关的构建设置会自动把预编译处理好，
                                    所以构建好的代码已经包含了编译出来的渲染函数而不是原始的"模板字符串"。

                                        如果你使用webpack ，并且喜欢分离JavaScript 和模板文件，你可以使用 vue-template-loader ，
                                    它也可以在构建过程中把模板文件转化成为JavaScript渲染函数。
                                */

                    // 三、 提取组件的CSS
                                /*
                                    当使用"单文件组件"时，组件内的CSS会以 <style>标签的方式通过JavaScript动态注入。
                                    这有一些小小的运行时开销，如果你使用服务端渲染，这会导致一段"无样式内容闪烁(fouc)".
                                    将所有组件的CSS提取到同一个文件可以避免这个问题，也会让CSS更好地进行压缩和缓存。

                                    查阅这个构建工具各自的文档来了解更多：
                                       1、 webpack + vue-loader (vue-cli 的webpack模板已经预先配置好) : https://vue-loader-v14.vuejs.org/zh-cn/configurations/extract-css.html

                                       2、 Browserify + vueify    :https://github.com/vuejs/vueify#css-extraction

                                       3、 Rollup + rollup-plugin-vue : https://rollup-plugin-vue.vuejs.org/#/en/2.3/?id=custom-handler
                                */


                    // 四、跟踪运行时错误
                                /*
                                    如果在组件渲染时出现运行错误，错误将会被传递至全局 Vue.config.errorHandler 配置函数(如果已设置)。
                                    利用这个钩子函数来配合错误跟踪服务是个不错的主意。比如 Sentry,它为Vue提供了官方集成
                                */
                                                
        </script>
    </body>
</html>